/*
 * data:数据内容数组，按行分成数组，每一行为一个数组，每个数组第一个字段为id，不参与显示其余的按顺序进行显示
 * widthArray：数组，用于规定每一列所占的比例
 * itemTypes：数组，用于规定每一列的显示类型，具体参见HomeProductItems控件
 * buttonText:用于规定按钮类型显示的文字
 *isItemSort:数组，用于规定字段是否触发排序，false不排序，true排序
 *itemHref 行点击跳转路径，根据数据源数组第一个数据对象中的linkId进行跳转
 * */

'use strict';
var React = require('react');
var HomeProductItems = require('./HomeProductItems.jsx');
var ReTableTitleOrder = require('../ReTableTitleOrder.jsx');
class HomeProductContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sort: '',
            orderTitleItemActive: 0
        };
        this.renderTitle = this.renderTitle.bind(this);
        this.renderContent = this.renderContent.bind(this);
        this.getMainClass = this.getMainClass.bind(this);
        this.getOrderTitleItemClass = this.getOrderTitleItemClass.bind(this);
        this.setOrderTitleActive = this.setOrderTitleActive.bind(this);
    }

    getOrderTitleItemClass(num) {
        if (num == this.state.orderTitleItemActive) {
            return 'orderTitleItemActive';
        }
        else {
            return 'rderTitleItemNormal'
        }
    }

    setOrderTitleActive(active) {
        this.setState({
            orderTitleItemActive: active
        });
    }

    //渲染标题
    renderTitle() {
        let itemWidth = this.props.widthArray;
        return this.props.title.map((item, i)=> {
            let style = {
                width: itemWidth[i]
            };
            if (!this.props.titleTypes) {
                return <div key={"HomeProductContent_TitleItem"+i} className="HomeProductContent_TitleItem"
                            style={style}>{item}</div>
            }
            else {
                switch (this.props.titleTypes[i]) {
                    case 'string':
                        return <div key={"HomeProductContent_TitleItem"+i} className="HomeProductContent_TitleItem"
                                    style={style}>{item}</div>;
                        break;
                    case 'order':
                        return <div onClick={this.setOrderTitleActive.bind(this,i)}
                                    key={"HomeProductContent_TitleItem"+i} className="HomeProductContent_TitleItem"
                                    style={style}><ReTableTitleOrder reClass={this.getOrderTitleItemClass(i)}
                                                                     key={"ReTableTitleOrder"+i} contentText={item}
                                                                     clickOfSingle={this.props.clickOfSingle.bind(this,i)}
                                                                     clickOfDouble={this.props.clickOfDouble.bind(this,i)}></ReTableTitleOrder>
                        </div>;

                }
            }
        });
    }

    renderContent() {
        let widthArray = this.props.widthArray;
        if (this.props.data) {
            return this.props.data.map((item, i)=> {
                return <HomeProductItems key={"HomeProductItems" +i} content={item} widthArray={widthArray}
                                         itemTypes={this.props.itemTypes}
                                         buttonText={this.props.buttonText}
                                         itemHref={this.props.itemHref}
                                         showTips={this.props.showTips}></HomeProductItems>
            });
        }
    }

    //获取主样式
    getMainClass() {
        if (this.props.reClass != undefined) {
            return "HomeProductContent_Container " + this.props.reClass;
        }
        else {
            return 'HomeProductContent_Container';
        }
    }

    render() {
        return (
            <div className={this.getMainClass()}>
                <div className="HomeProductContent_Title">
                    {this.renderTitle()}
                </div>
                <div className="HomeProductContent_Content">
                    {this.renderContent()}
                </div>
            </div>
        )
    }
}

module.exports = HomeProductContent;